﻿@{
    ViewBag.Title = "ViewAlbum";
}

<h2>Album details</h2>

@Html.Partial("Styles")

<div id="left" style="width: 20%; float: left;">
    <h3 style ="font-size:18px">@ViewBag.album.Title</h3>
    <img src="../Content/Image/emeil.jpg" style="height: 200px">
    <br />$@ViewBag.album.Price <br />
    @ViewBag.date
    <br />
    <br />
    
    @if (ViewBag.type != "Y")
    {       
        <label class="cartCheckBox">
            <input type="checkbox" id="@ViewBag.album.ID" onclick="TransactionCart(@ViewBag.typeAlbum, @ViewBag.album.ID)"/>
            <span></span>
        </label>
 
        <label class="favCheckBox">
            <input type="checkbox" id ="@("f" + ViewBag.album.ID)" onclick="FavouriteCart(@ViewBag.typeAlbum, @ViewBag.album.ID)"/>
            <span></span>
        </label>
    }
 
   
</div>




 <div id="right" style="margin-left: 30%">
    <br /><br /><br />
    <table frame="box" style="border-color:#708090;border-width:2px;border-radius:5px">
      <col width="100px">
      <col width="500px">
      <col width="400px">
      <col width="200px">
      <col width="200px">
      <col width="100px">
      <col width="100px">

        <tr>
          <td> </td>
          <td><b>Title</b></td> 
          <td><b>Artist</b></td>
          <td><b>Duration(s)</b></td>
          <td><b>Price</b></td>
        </tr>

        

        @* just spacings *@
         <tr>
          <td> </td>
          <td><b> </b></td> 
          <td><b> </b></td>
          <td><b> </b></td>
          <td><b> </b></td>
        </tr>
        <tr>
          <td> </td>
          <td><b> </b></td> 
          <td><b> </b></td>
          <td><b> </b></td>
          <td><b> </b></td>
        </tr>

        @for (int i = 0; i < ViewBag.album.Songs.Count; i++)
        {
            string artist = "";
            <tr>
              <td>&nbsp @(i + 1)</td>
              <td>@ViewBag.album.Songs[i].Title</td>
              <td>
                @for (int k = 0; k < ViewBag.album.Songs[i].Artists.Count; k++)
                {
                    if (k == 0)
                    {
                        artist = ViewBag.album.Songs[i].Artists[k].Name;
                    }
                    else
                    {
                        artist = artist + " & " + ViewBag.album.Songs[i].Artists[k].Name;
                    }
                }
                @Html.Raw(artist)
              </td> 
              <td>@ViewBag.album.Songs[i].Duration</td>
              <td>@ViewBag.album.Songs[i].Price</td>

              @if (ViewBag.type != "Y")
              {
                  <td> 
                    <label class="cartCheckBox">
                        <input type="checkbox" id="@("s" + ViewBag.album.Songs[i].ID)" onclick="TransactionCart(@ViewBag.typeSong, @ViewBag.album.Songs[i].ID)"/>
                        <span></span>
                    </label>
                </td>
                <td> 
                    <label class="favCheckBox">
                        <input type="checkbox" id ="@("fs" + ViewBag.album.Songs[i].ID)" onclick="FavouriteCart(@ViewBag.typeSong, @ViewBag.album.Songs[i].ID)"/>
                        <span></span>
                    </label>
                </td>
              <td><input type="button" onclick="ViewSong(@ViewBag.album.Songs[i].ID)" value="Details" /></td>
              <td>&nbsp&nbsp</td>
              }
 
            </tr>
        }

    </table>


</div>






@* need to use a diff script as there are 2 same ID cart & fav *@
<script>
    // details
    function ViewSong(ID)
    {
        document.getElementById("songID").value = ID;
        document.getElementById("ViewSong").click();
    }


    // buy
    var getType; //1: song, 2: album
    var getID;

    function TransactionCart(type, ID)
    {
        if(type == 1) //song
        {
            checked = document.getElementById("s"+ID).checked;
        }
        else //album
        {
            checked = document.getElementById(ID).checked;
        }
        
        getType = type;
        getID = ID;

        if (checked) {
            AddToCart();
        }
        else {
            RemoveFromCart();
        }
    }
    function AddToCart() {
        XMLhttpAddToCart = new XMLHttpRequest();
        XMLhttpAddToCart.open("POST", "/Transaction/AddToCart", true);
        XMLhttpAddToCart.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        XMLhttpAddToCart.onreadystatechange = reqReadyAddToCart;
        sendStrAddToCart = "type=" + getType + "&productID=" + getID;
        XMLhttpAddToCart.send(sendStrAddToCart);
    }
    function reqReadyAddToCart() {
        if (XMLhttpAddToCart.readyState == 4 && XMLhttpAddToCart.status == 200) {
            if(XMLhttpAddToCart.response == "Please log in!" || XMLhttpAddToCart.response == "You bought this!")
            {
                alert(XMLhttpAddToCart.response);

                if(getType == 1)
                {
                    document.getElementById("s"+getID).checked = false;
                }
                else
                {
                    document.getElementById(getID).checked = false;
                }
            }
            else
            {
                alert(XMLhttpAddToCart.response);
                customAlert(XMLhttpAddToCart.response, "2000");
            }

        } else if (XMLhttpAddToCart.readyState == 4) {
            alert("error! code: " + XMLhttpAddToCart.status);

        }
    }
    function RemoveFromCart() {
        XMLhttpRemoveFromCart = new XMLHttpRequest();
        XMLhttpRemoveFromCart.open("POST", "/Transaction/RemoveFromCart", true);
        XMLhttpRemoveFromCart.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        XMLhttpRemoveFromCart.onreadystatechange = reqReadyRemoveFromCart;
        sendStrRemoveFromCart = "type=" + getType + "&productID=" + getID;
        XMLhttpRemoveFromCart.send(sendStrRemoveFromCart);
    }    
    function reqReadyRemoveFromCart() {
        if (XMLhttpRemoveFromCart.readyState == 4 && XMLhttpRemoveFromCart.status == 200) {
            alert("Removed from cart!");

        } else if (XMLhttpRemoveFromCart.readyState == 4) {
            alert("error! code: " + XMLhttpRemoveFromCart.status);

        }
    }



    // wish
    function FavouriteCart(type, ID) 
    {
        getType = type;
        getID = ID;
        
        if(type == 1)
        {
            checked = document.getElementById("fs" + ID).checked;
        }
        else
        {
            checked = document.getElementById("f" + ID).checked;
        }
        if (checked) {
            AddToFav();
        }
        else {
            RemoveFromFav();
        }
    }
    function AddToFav() {
        XMLhttpAdd = new XMLHttpRequest();
        XMLhttpAdd.open("POST", "/WishList/AddToWish", true);
        XMLhttpAdd.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        XMLhttpAdd.onreadystatechange = reqReadyAddToFav;
        sendStrAdd = "type=" + getType + "&productID=" + getID;
        XMLhttpAdd.send(sendStrAdd);

    }
    function reqReadyAddToFav() {
        if (XMLhttpAdd.readyState == 4 && XMLhttpAdd.status == 200) {
            alert(XMLhttpAdd.response);
            if (XMLhttpAdd.response == "Please log in!")
            {
                if(getType == 1)
                {
                    document.getElementById("fs"+getID).checked = false;
                }
                else
                {
                    document.getElementById("f"+getID).checked = false;
                }
            }
        }
        else {
            if (XMLhttpAdd.readyState == 4) {
                alert("error! code: " + XMLhttpAdd.status);
            }

        }
    }
    function RemoveFromFav() {
        XMLhttpRemove = new XMLHttpRequest();
        XMLhttpRemove.open("POST", "/WishList/RemoveFromWish", true);
        XMLhttpRemove.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        XMLhttpRemove.onreadystatechange = reqReadyRemoveFromFav;
        sendStrRemove = "type=" + getType + "&productID=" + getID;
        XMLhttpRemove.send(sendStrRemove);
    }
    function reqReadyRemoveFromFav() {
        if (XMLhttpRemove.readyState == 4 && XMLhttpRemove.status == 200) {
            alert(XMLhttpRemove.response);

        } else if (XMLhttpRemove.readyState == 4) {
            alert("error! code: " + XMLhttpRemove.status);

        }
    }



   
</script>


@* To view song *@
<form action="/Products/ViewSong" method="post">
    <input type="text" id ="songID" name ="songID" hidden="hidden"/>
    <input type="submit" id="ViewSong" hidden="hidden"/>
</form>


<form action="/Products/ViewAlbum" method="post">
    <input type="submit" id="refereshThis" hidden="hidden"/>
</form>
